<template>
	<view class="container">
		<!-- 顶部欢迎区域 -->
		<view class="welcome-section">
			<view class="welcome-text">
				<text class="greeting">Hi，{{ greeting }}</text>
				<text class="username">{{ userInfo.userGender === '男' ? 'MR.' : 'MRS.' }}{{ userInfo.userName }}</text>
			</view>
			<image :src="userInfo.userAvatar || '/static/logo.png'" @click="toUserInfo" class="user-avatar"></image>
		</view>

		<!-- 卡片滚动区域 -->
		<view class="scroll-container">
			<view class="card" 
				v-for="(item, index) in items" 
				:key="index"
				@click="handleCardClick(item)"
			>
				<image :src="item.image" class="card-image"></image>
				<view class="card-content">
					<text class="card-title">{{ item.title }}</text>
					<text class="card-description">{{ item.description }}</text>
				</view>
			</view>
		</view>
		
		<!-- 列表标题 -->
		<view class="section-title">
			<text class="title-text">灵感创意</text>
		</view>
		
		<!-- 列表展示区域 -->
		<view class="list-container">
			<view class="list-item" v-for="(item, index) in listItems" :key="index">
				<image :src="item.avatar" class="avatar"></image>
				<view class="text-container">
					<text class="item-title">{{ item.title }}</text>
					<text class="item-description">{{ item.description }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { User } from '@/datas/user.js'
import {onShow} from '@dcloudio/uni-app'
import { http } from '@/utils/http.js'

const items = reactive([
	{
		image: '/static/topScrollView/img1.png',
		title: 'AI对话',
		description: '智能助手随时待命',
		path: '/pages/chat/index'
	},
	{
		image: '/static/topScrollView/img2.png',
		title: '题目精练',
		description: '专项训练提升能力',
		path: '/pages/home/practice'
	},
	{
		image: '/static/topScrollView/img3.png',
		title: '社区交流',
		description: '分享经验交流心得',
		path: '/pages/community/index'
	},
	{
		image: '/static/logo.png',
		title: '功能标题4',
		description: '功能描述4'
	},
	{
		image: '/static/logo.png',
		title: '功能标题5',
		description: '功能描述5'
	}
])

const listItems = reactive([
	{
		avatar: '/static/topScrollView/img2.png',
		title: '每日待练',
		description: '开启今日\'学习之旅\''
	},
	{
		avatar: '/static/topScrollView/img1.png',
		title: '排忧解惑',
		description: '解决你99.99%的问题'
	},
	{
		avatar: '/static/topScrollView/img3.png',
		title: '轻松伴学',
		description: '学不动了？我们陪你！'
	},
	{
		avatar: '/static/logo.png',
		title: '列表标题4',
		description: '这是第四个列表项的描述文字'
	},
	{
		avatar: '/static/logo.png',
		title: '信息维护',
		description: '信息泄露可就糟了！'
	}
])

const title = ref('主页')

// 用户信息
const userInfo = ref(new User())

// 问候语
const greeting = ref('')

// 获取问候语
const getGreeting = () => {
	const hour = new Date().getHours()
	if (hour >= 5 && hour < 12) {
		return '上午好'
	} else if (hour >= 12 && hour < 14) {
		return '中午好'
	} else {
		return '下午好'
	}
}

// 初始化用户信息和问候语
onMounted(() => {
	// 获取存储的用户信息
	const storedUserInfo = uni.getStorageSync('userInfo')
	if (storedUserInfo) {
		userInfo.value = new User(storedUserInfo)
	}
	
	// 设置问候语
	greeting.value = getGreeting()
})

onShow(() => {
	// 获取存储的用户信息
	const storedUserInfo = uni.getStorageSync('userInfo')
	if (storedUserInfo) {
		userInfo.value = new User(storedUserInfo)
	}
	
	// 设置问候语
	greeting.value = getGreeting()
	
	uni.hideLoading()
})

const toUserInfo = () => {
	uni.showLoading({
		title: '跳转中...',
		icon: 'loading'
	});
	uni.switchTab({
		url: '/pages/profile/index'
	})
}

// 修改卡片点击跳转方法
const handleCardClick = (item) => {
	if (item.path) {
		uni.showLoading({
			title: '跳转中...',
			icon: 'loading'
		});
		
		// 定义 tabbar 页面路径数组
		const tabPages = [
			'/pages/home/index',
			'/pages/chat/index',
			'/pages/community/index',
			'/pages/profile/index'
		];
		
		// 判断是否是 tabbar 页面
		if (tabPages.includes(item.path)) {
			uni.switchTab({
				url: item.path
			})
		} else {
			uni.navigateTo({
				url: item.path
			})
		}
	}
}

</script>

<style>
.container {
	padding: 20rpx;
}

/* 卡片滚动区域样式 */
.scroll-container {
	display: flex;
	overflow-x: auto;
	padding: 10rpx;
	margin-bottom: 30rpx;
}

.scroll-container::-webkit-scrollbar {
	display: none;
}

.card {
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	margin-right: 20rpx;
	width: 300rpx;
	flex-shrink: 0;
	text-align: center;
}

.card-image {
	width: 100%;
	height: 200rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.card-content {
	padding: 20rpx;
}

.card-title {
	font-size: 30rpx;
	color: #333;
	margin: 10rpx 0;
}

.card-description {
	font-size: 24rpx;
	color: #666;
	display: block;
}

/* 列表展示区域样式 */
.list-container {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 10rpx;
	/* padding-bottom: calc(24rpx + constant(safe-area-inset-bottom)); */
	/* padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + var(--window-bottom)); */
	/* margin-bottom: calc(var(--window-bottom)); */
}

.list-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.list-item:last-child {
	border-bottom: none;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin: 10rpx;
}

.text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 10rpx;
	flex: 1;
}

.item-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}

.item-description {
	font-size: 24rpx;
	color: #999;
	display: block;
}

/* 新增标题样式 */
.section-title {
	padding: 20rpx 10rpx;
	margin-bottom: 10rpx;
}

.title-text {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
}

/* 新增顶部欢迎区域样式 */
.welcome-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 10rpx 30rpx 10rpx;
	margin-bottom: 20rpx;
}

.welcome-text {
	display: flex;
	flex-direction: column;
}

.greeting {
	font-size: 28rpx;
	color: #333;
	/* margin-bottom: 0rpx; */
}

.username {
	font-size: 42rpx;
	font-weight: bold;
	color: #333;
}

.user-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
</style>